import React, { Component } from 'react'
import { getcommlist, getMsg, getuserinfo_name_pic } from '../../redux/actionCreator'
import { withRouter } from "react-router-dom"
import { connect } from 'react-redux'
import { imgInter } from '../../data/Interface'
import pxPage from '../../root/pxPage'
import zIndex from '@material-ui/core/styles/zIndex'

const li = {
    width: pxPage(375),
    height: pxPage(50),
    position: 'relative'
}
const liimg = {
    width: pxPage(25),
    height: pxPage(25),
    position: 'absolute',
    top: pxPage(5),
    left: pxPage(15),
    borderRadius: '50%',
    border: '1px solid #fff'
}
const divnametime = {
    position: 'absolute',
    top: pxPage(5),
    left: pxPage(65),
    fontSize: pxPage(14),
    color: 'gray'
}
const commtext = {
    position: 'absolute',
    bottom: pxPage(5),
    left: pxPage(65),
    fontSize: pxPage(16),
    wordWrap: 'break-word',
    wordBreak: 'normal',
    width: `${pxPage(300)}px`,
}
export class Commdateil extends Component {
    constructor(props) {
        super(props);
        this.state = {
            info: JSON.parse(localStorage.getItem('commdetail')),
            // comm :props.comm
        }
        this.props.dispatch(getcommlist(this.state.info.commodity_id))
    }

    render() {
        const { info } = this.state
        const { comment } = this.props
        return (
            <div style={{ minHeight: '100vh', display: 'flex', width: '100%' }}>
                <div style={{ backgroundColor: "#080904", minHeight: '100vh', display: 'flex', width: '100%' }}>
                    <div style={{ margin: '0 auto', width: '100%' }}>
                        <div
                            style={{ textAlign: 'center', fontSize: '1.5em', fontWeight: 'bold', width: '100%', height: '12em', background: `url(${imgInter + info.commodity_pic}) no-repeat fixed top` }}
                        >
                            <div
                                onClick={() => {
                                    window.scrollTo(0, 0)
                                }}
                                style={{ position: 'fixed', top: '0', background: 'linear-gradient(#000,rgba(8,9,4),rgba(8,9,4,0.3))', height: `${pxPage(60)}px`, width: '100%', zIndex: '3' }}
                            >
                                <i className='iconfont icon-fanhui' style={{ fontSize: '1em', position: 'fixed', top: '0.5em', left: '0.5em' }}
                                    onClick={() => {
                                        this.props.history.goBack()
                                    }}
                                ></i></div>

                            <div style={{ paddingTop: '10em', }}></div>
                            {/* 果园名 */}
                            <div
                                className="detail-title"
                                style={{ height: '4em', width: '100%', lineHeight: '2em' }}
                            >
                                {getMsg(this.props).business_name}·{info.commodity_title}
                            </div>
                        </div>

                        {/* 渲染的评论数据 */}
                        <div style={{ backgroundColor: 'black', width: '100%', margin: '0 auto', position: 'absolute', top: `${pxPage(280)}px` }}>
                            {/* <div style={{margin:'auto'}}> */}

                            {/* </div> */}
                            {
                                this.props.comment.map((item, index) => {
                                    return <li key={index}
                                        style={{
                                            width: `90%`,
                                            marginBottom: '10px',
                                            paddingLeft: `${pxPage(15)}px`,
                                            borderTop: `1px solid rgb(110,110,110)`,
                                            paddingTop:`${pxPage(15)}px`,
                                            paddingBottom:`${pxPage(10)}px`,
                                        }}
                                    >

                                        {/* 评论者头像 */}
                                        <img src={imgInter + item.user_pic}
                                            style={{
                                                width: pxPage(25),
                                                height: pxPage(25),
                                                borderRadius: '50%',
                                                border: '1px solid #fff',
                                                position: 'relative',
                                                left: `${pxPage(10)}px`
                                            }}
                                        ></img>

                                        {/* 评论人姓名 */}
                                        <span
                                            style={{
                                                fontSize: pxPage(14),
                                                color: 'gray',
                                                position: 'relative',
                                                bottom: `${pxPage(5)}px`,
                                                left: `${pxPage(15)}px`,
                                                marginRight: '10px'
                                            }}

                                        >
                                            {item.user_name}
                                        </span>

                                        {/* 评论时间 */}
                                        <span
                                            style={{
                                                fontSize: pxPage(14),
                                                color: 'gray',
                                                position: 'relative',
                                                bottom: `${pxPage(5)}px`,
                                                left: `${pxPage(15)}px`
                                            }}
                                        >
                                            {item.time}
                                        </span>

                                        {/* 评论内容 */}
                                        <div
                                            style={{
                                                // textIndent:'2em',
                                                position: 'relative',
                                                left: `${pxPage(15)}px`,
                                                fontSize: pxPage(16),
                                                width: `${pxPage(320)}px`,
                                                wordWrap: 'break-word',
                                                paddingTop:`${pxPage(5)}px`,
                                                // wordBreak: 'normal',
                                            }}
                                        // style={commtext}
                                        >
                                            {item.comment_context}</div>
                                    </li>
                                })
                            }

                            {/* 用户填补mytab的空缺 */}
                            <div style={{ height: `${pxPage(70)}px` }}></div>
                            {/* {
                            this.props.comment.map((item, index) => {
                                return <li key={index}
                                    style={{
                                        width: pxPage(375),
                                        height: pxPage(50),
                                    }}
                                // style={li}
                                >
                                    <img src={imgInter + item.user_pic}
                                        style={{
                                            width: pxPage(25),
                                            height: pxPage(25),
                                            borderRadius: '50%',
                                            border: '1px solid #fff'
                                        }}
                                    // style={liimg}
                                    ></img>
                                    <span
                                        style={{
                                            fontSize: pxPage(14),
                                            color: 'gray'
                                        }}
                                    // style={divnametime}
                                    >
                                        {item.user_name}{item.time}</span>

                                 
                                    <div
                                        style={{
                                            height:`${pxPage(50)}px`,
                                            fontSize: pxPage(16),
                                            width: `${pxPage(300)}px`,
                                            wordWrap: 'break-word',
                                            // wordBreak: 'normal',
                                        }}
                                    // style={commtext}
                                    >
                                        {item.comment_context}</div>
                                   
                                </li>
                            })
                        } */}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    login: state.login,
    business: state.business,
    comment: state.comment
})
export default withRouter(connect(mapStateToProps)(Commdateil))